<script setup lang="ts">
import SidebarMenu from "@/components/SidebarMenu.vue"
import { getUser, clearUser } from "@/utils/auth"
import { logoutToServer } from "@/api/user"
import router from "@/router"
import { Fold, Expand } from "@element-plus/icons-vue"
import { ref } from "vue"

const isCollapse = ref(false)
const user = ref(getUser())

const logout = async () => {
  const res = await logoutToServer()
  if (res.code === 200) {
    clearUser()
    window.location.href = "/login"
  }
}
</script>

<template>
  <div class="layout">
    <!-- ========== 左侧栏 ========== -->
    <aside class="sidebar" :class="{ collapse: isCollapse }">
      <!-- 顶部 Logo + 标题 -->
      <div class="sidebar-header">
        <img src="@/assets/images/logo/logo.png" class="logo" />
        <h2 v-if="!isCollapse">毛孩子管理</h2>

        <div class="collapse-btn" @click="isCollapse = !isCollapse">
          <el-icon>
            <Fold v-if="!isCollapse" />
            <Expand v-else />
          </el-icon>
        </div>
      </div>

      <!-- 菜单（动态渲染，可滚动） -->
      <div class="sidebar-scroll">
        <SidebarMenu :collapse="isCollapse" />
      </div>

      <!-- 左下角用户信息 -->
      <div class="sidebar-user">
        <img
          class="user-avatar"
          :src="user?.avatar"
          @click="router.push('/settings/user')"
        />
        <div v-if="!isCollapse" class="user-info">
          <div class="user-name">{{ user?.nickname }}</div>
          <div class="logout-btn" @click="logout">退出登录</div>
        </div>
      </div>
    </aside>

    <!-- ========== 右侧内容区（自身滚动） ========== -->
    <main class="content">
      <router-view />
    </main>
  </div>
</template>

<style scoped>
/* 整体布局：左右结构，自己占满屏幕高度，隐藏 body 的滚动条 */
.layout {
  display: flex;
  height: 100vh;
  background: #faf7ef;
  overflow: hidden; /* 防止外层再出现一根滚动条 */
}

/* 左侧栏 */
.sidebar {
  width: 260px;
  background: #f5eedc;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.05);
  transition: width 0.25s;
}

.sidebar.collapse {
  width: 64px;
}

.sidebar-header {
  height: 60px;
  padding: 10px;
  display: flex;
  align-items: center;
}

.logo {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.collapse-btn {
  margin-left: auto;
  cursor: pointer;
}

/* 菜单区域：可以自己滚动 */
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
}

/* 左下角用户信息 */
.sidebar-user {
  padding: 10px;
  height: 80px;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
  cursor: pointer;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

.logout-btn {
  font-size: 13px;
  color: #e49a39;
  margin-top: 4px;
  cursor: pointer;
}

/* 右侧内容：自己滚动 */
.content {
  flex: 1;
  padding: 10px;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}

/* =================== 滚动条美化 =================== */
/* 只作用于当前组件里的滚动容器（左侧菜单 + 右侧内容） */
.sidebar-scroll,
.content {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

/* WebKit 浏览器（Chrome / Edge） */
.sidebar-scroll::-webkit-scrollbar,
.content::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
</style>
